<template>
  <div class="app-container">
    <div v-if="!showEditor">
      <div class="inquire-header">
        <div class="input-list">
          <div class="gap-1 mb-4">
            <div class="list-name">车辆编号</div>
            <el-input v-model="input1" style="width: 240px" placeholder="请输入" />
          </div>
          <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
            <div class="list-name">联系电话</div>
            <el-input v-model="input2" style="width: 240px" placeholder="请输入" />
          </div>
          <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
            <div class="list-name">车牌号码</div>
            <el-input v-model="input3" style="width: 240px" placeholder="请输入" />
          </div>
          <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
            <div class="list-name">车辆状态</div>
            <el-input v-model="input4" style="width: 240px" placeholder="请输入" />
          </div>
        </div>
        <div class="list-btn" flex>
          <div class="btn-reset" @click="resetSearch">重置</div>
          <!-- <div class="btn-reset" @click="searchData" style="margin-left: 10px">查询</div> -->
        </div>
      </div>
      <div class="inquire-container">
        <div class="inquire-item-header">
          <div class="section">设备清单</div>
        </div>
        <div class="covered-table">
          <el-table
            :data="paginatedFilteredData"
            style="width: 100%"
            class="topsoil-tab"
            @selection-change="handleSelectionChange"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column type="selection" width="30" />
            <el-table-column prop="id" label="定义标签" align="center" />
            <el-table-column prop="name" label="车牌号码" align="center" />
            <el-table-column prop="num" label="车辆分组" align="center" />
            <el-table-column prop="person" label="所属单位" align="center" />
            <el-table-column prop="telephone" label="车辆状态" align="center" sortable />
            <el-table-column prop="date" label="车辆位置" align="center">
              <template #default="scope">
                <div flex justify-center @click="editRow(scope.row)">
                  <el-icon><LocationFilled /></el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作" align="center">
              <template #default="scope">
                <div flex justify-center>
                  <div @click="deleteRow(scope.row)" class="btn-edit">删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :background="true"
              layout="total,  prev, pager, next, jumper"
              :page-sizes="[9, 18, 27]"
              :total="tableData.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <div v-if="showEditor">
      <orientationPage :editData="editData" @delete="deleteRow" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, Ref } from "vue"
import orientationPage from "./orientationPage.vue"
// import createFence from "./components/createFence.vue"
// import fenceMap from "./components/fenceMap.vue"
interface User {
  id: string
  name: string
  num: string
  person: string
  telephone: string
}
const input1 = ref("")
const input2 = ref("")
const input3 = ref("")
const input4 = ref("")
const showEditor = ref(false)
const editData = ref<User | null>(null)
// 追踪激活的按钮
const activeBtn = ref<string>("")

const tableData: Ref<User[]> = ref([
  {
    id: "82:81:62:E8:96:41",
    name: "青E34A2D",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "启动中"
  },
  {
    id: "FC:EC:16:B8:22:2D",
    name: "新K951VH",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "停车xx天"
  },
  {
    id: "A9:C3:62:CB:97:C2",
    name: "甘ENA934",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "启动中"
  },
  {
    id: "71:12:24:AB:95:C2",
    name: "甘G5F54E",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "启动中"
  },
  {
    id: "90:DE:45:D9:B5:61",
    name: "甘G5F54E",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "启动中"
  },
  {
    id: "42:99:48:A8:D8:30",
    name: "桂K24TC8",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "启动中"
  },
  {
    id: "30:2B:35:78:8E:31",
    name: "云H2AR12",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "启动中"
  },
  {
    id: "C4:5D:16:7C:BE:8F",
    name: "苏CX81C6",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "启动中"
  },
  {
    id: "22213942",
    name: "豫E57KX3",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "启动中"
  },
  {
    id: "213131231",
    name: "豫A51YF2",
    num: "默认分组",
    person: "xxx工程公司",
    telephone: "启动中"
  }
])

const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
// 重置查询
const resetSearch = () => {
  input1.value = ""
  input2.value = ""
  input3.value = ""
  currentPage.value = 1
  activeBtn.value = "reset"
}

// 点击查询按钮
const searchData = () => {
  currentPage.value = 1
}

// 分页相关的状态
const currentPage = ref(1) // 当前页码
const pageSize = ref(9) // 每页显示条目数

// 根据输入框的内容筛选表格数据
const filteredData = computed(() => {
  const query = input1.value.trim().toLowerCase() //车辆编号
  // const num = input2.value.trim().toLowerCase() // 联系电话
  const person = input3.value.trim().toLowerCase() // 车牌号码
  const queryArr = input4.value.trim().toLowerCase() //车辆状态
  if (!query && !person && !queryArr) {
    return tableData.value // 如果没有输入查询条件，返回全部数据
  }
  return tableData.value.filter(
    (item) =>
      (query && String(item.id).toLowerCase().includes(query)) ||
      (person && String(item.name).toLowerCase().includes(person)) ||
      (queryArr && String(item.telephone).toLowerCase().includes(queryArr))
  )
})

// 根据分页展示过滤后的数据
const paginatedFilteredData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredData.value.slice(start, end)
})
// 处理分页变化
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
}
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
}

// 点击编辑按钮，显示编辑页面
const editRow = (row: User) => {
  editData.value = { ...row } // 复制当前行的数据
  showEditor.value = true
}

// 删除当前行
const deleteRow = (row: User) => {
  const index = tableData.value.findIndex((item) => item.id === row.id)
  if (index !== -1) {
    tableData.value.splice(index, 1) // 删除数据
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/global.scss";
.app-container {
  width: 100%;
  height: 100%;
  position: relative;

  .inquire-header {
    width: 100%;
    height: 78px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #e4e4e7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 23px;
    .input-list {
      display: flex;
      align-items: center;
      margin-top: 16px;
      .list-name {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85) !important;
        margin-bottom: 6px;
      }
    }
    .list-btn {
      // width: 140px;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      cursor: pointer;

      .btn-reset {
        width: 64px;
        height: 31px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #d9d9d9;
        text-align: center;
        line-height: 31px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
      }
      .btn-reset:hover {
        background-color: #059669; // 激活状态背景颜色
        color: #fff; // 激活状态的字体颜色
      }

      .active {
        background-color: #059669; // 激活状态背景颜色
        color: #fff; // 激活状态的字体颜色
      }
    }
  }
  .inquire-container {
    width: 100%;
    height: 91%;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    margin: 16px 0 20px 0;
    padding: 20px 23px;
    .inquire-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .section {
      font-family: AlibabaPuHuiTi20;
      font-weight: bold;
      font-size: 16px;
      color: #000000;
    }
    .input-btn {
      width: 82px;
      height: 32px;
      background: #059669;
      border-radius: 0px 0px 0px 0px;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      span {
        margin-left: 4px;
      }
    }
  }
  .covered-table {
    width: 100%;
    position: relative;
    .demo-pagination-block {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }
    .details-content {
      height: 330px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 10px;
      .details-item {
        display: flex;
        .details-text {
          width: 100px;
          text-align: right;
          margin-right: 15px;
        }
      }
    }
  }
}
::v-deep.topsoil-tab {
  margin-top: 30px;
  cursor: pointer;
  th {
    height: 54px;
    background: #fafafa;
    color: #000000;
    font-family:
      Alibaba PuHuiTi 2,
      Alibaba PuHuiTi 20;
    font-weight: normal;
    font-size: 14px;
    color: #000000;
    line-height: 32px;
  }
  td {
    height: 54px;
    font-family:
      Alibaba PuHuiTi 2,
      Alibaba PuHuiTi 20;
    font-weight: normal;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
  }
  .btn-details {
    margin-right: 10px;
  }
  .btn-details:hover {
    color: #059669;
  }
  .btn-edit:hover {
    color: #fd3030;
  }
}
::v-deep.el-pagination.is-background .el-pager li.is-active {
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #31878a !important;
  color: #000000;
}
::v-deep .el-pager li:hover {
  color: #31878a;
  border: 1px solid #31878a !important;
}
::v-deep .el-pagination button:hover {
  color: #31878a;
}
::v-deep .el-button--text:not(.is-disabled):hover {
  background-color: transparent;
  border-color: transparent;
  color: #31878a;
}
::v-deep .el-dialog__title {
  color: #34b167;
}
::v-deep .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #059669;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #059669;
  border-color: #059669;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #059669;
  border-color: #059669;
}
::v-deep .el-checkbox__inner:hover {
  border-color: #059669;
}
::v-deep .el-table__inner-wrapper {
  height: 540px;
}
</style>
